show player logs on view match page

1 files changed, 42 insertions, 0 deletions

diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 11d6ee3..25438ad 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -22,6 +22,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import Visualizer from "$lib/components/Visualizer.svelte";
+  import PlayerLog from "$lib/components/PlayerLog.svelte";
+  import Select from "svelte-select";
+  import { PLAYER_COLORS } from "$lib/constants";
 
   export let matchLog: string | undefined;
   export let matchData: object;
@@ -30,13 +33,35 @@
     const apiClient = new ApiClient();
     matchLog = await apiClient.getText(`/api/matches/${matchData["id"]}/log`);
   });
+
+  let selectedPlayer;
+
+  $: matchPlayerSelectItems = matchData["players"].map((player: any, index: number) => ({
+    color: PLAYER_COLORS[index],
+    value: index,
+    playerId: index + 1, // stoopid player number + 1
+    label: player["bot_name"],
+  }));
 </script>
 
 <div class="container">
   <Visualizer {matchLog} {matchData} />
+  <div class="output-pane">
+    <div class="player-select">
+      <Select items={matchPlayerSelectItems} clearable={false} bind:value={selectedPlayer}>
+        <div slot="item" let:item>
+          <span style:color={item.color}>{item.label}</span>
+        </div>
+      </Select>
+    </div>
+    <div class="player-log">
+      <PlayerLog {matchLog} playerId={selectedPlayer?.playerId} />
+    </div>
+  </div>
 </div>
 
 <style lang="scss">
+  @use "src/styles/variables";
   .container {
     display: flex;
     // these are needed for making the visualizer fill the screen.
@@ -44,4 +69,21 @@
     flex-grow: 1;
     overflow: hidden;
   }
+
+  .player-select {
+    padding: 20px;
+  }
+
+  .player-log {
+    padding: 15px;
+    overflow-y: scroll;
+  }
+
+  .output-pane {
+    width: 600px;
+    // overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: variables.$bg-color;
+  }
 </style>